<!-- 通用页面组件 -->
<template>
  <div class="main-card">
    <a-spin :spinning="loading" class="full-screen-spin">
      <!-- 头部 -->
      <div ref="pageHeaderRef" :class="['page-header']" @click.stop="">
        <div class="header-title">
          <slot name="crumb">
            <a-breadcrumb v-if="crumbs.length" class="crumbs" :class="[crumbs.length > 2 && 'exceed']" :separator="separator">
              <template v-for="(crumb, index) in crumbs" :key="index">
                <a-breadcrumb-item v-if="crumb.overlay === undefined" :href="crumb.path" @click="go(crumb.path || '')">
                  <span :title="crumb.name">{{ crumb.name }}</span>
                </a-breadcrumb-item>
                <a-breadcrumb-item v-else>
                  {{ crumb.name }}
                  <template #overlay>
                    <a-menu>
                      <a-menu-item v-for="(item, index) in crumb.overlay" :key="index" @click="go(item.path || '')">
                        <span :title="item.name">{{ item.name }}</span>
                      </a-menu-item>
                    </a-menu>
                  </template>
                </a-breadcrumb-item>
              </template>
            </a-breadcrumb>
          </slot>
          <div class="title-box">
            <div>
              <slot name="title">
                <div class="title">
                  <i v-if="iconName" :class="['icon iconfont', iconName]"></i>
                  <div class="default-title">{{ title }}</div>

                  <switch-tabs
                    v-if="tabs.length"
                    class="switch-tabs pl-32"
                    :selected-tab="selectedTab"
                    :tabs="tabs"
                    @switch-tab="onSwitchTab"
                  />
                </div>
                <!-- 副标题 -->
                <slot name="subheading"></slot>
              </slot>
            </div>
            <div class="ml-12">
              <slot name="tool-btn"> </slot>
            </div>
          </div>
        </div>

        <!-- 工具栏 -->
        <div v-if="showScreenSpace" class="screen-space" :style="(screenStyleObj as any)">
          <slot name="screen-space"></slot>
        </div>
      </div>

      <!-- 页面body -->
      <template v-if="isFixedBody">
        <div class="main-body" :style="{ height: `${fixedBodyHeight}px` }">
          <slot name="default"></slot>
        </div>
      </template>
      <template v-else>
        <div class="main-body" :style="{ paddingBottom: `${pageFooterHeight + 26}px`, ...mainBodyStyleObj }">
          <slot name="default"></slot>
        </div>
        <div ref="pageFooterRef" class="page-footer" :style="{ left: `${layoutInfo.sideMenuWidth}px` }">
          <slot name="page-footer"></slot>
        </div>
      </template>
    </a-spin>
  </div>
</template>

<script setup lang="ts">
  import { useEventListener, useResizeObserver, useWindowSize } from '@vueuse/core'
  import { computed, onMounted, ref } from 'vue'
  import { useRoute, useRouter } from 'vue-router'

  import SwitchTabs, { Tab } from '@/components/SwitchTabs/index.vue'
  import { useSysInfoStore } from '@/store/sys-info'

  export interface Crumb {
    name: string
    path?: string
    overlay?: Crumb[]
  }

  interface Props {
    title?: string //页面标题
    tabs?: Tab[] //页面tab
    iconName?: string //页面icon的class
    crumbs?: Crumb[] //面包屑
    showScreenSpace?: boolean //是否显示工具栏
    screenStyleObj?: object // 工具栏的样式
    mainBodyStyleObj?: object // body的样式
    loading?: boolean //是否显示页面loading
    isFixedBody?: boolean //是否固定mainBody高度，如果固定将不会有页面全局滚动，而是内滚
    subheading?: string
    separator?: string
  }

  withDefaults(defineProps<Props>(), {
    title: '',
    iconName: '',
    loading: false,
    isFixedBody: false,
    showScreenSpace: true,
    screenStyleObj: () => ({}),
    mainBodyStyleObj: () => ({}),
    crumbs: () => [],
    tabs: () => [],
    subheading: '',
    separator: '>'
  })

  const emits = defineEmits(['search', 'update:inputValue', 'scrollBottom'])

  const router = useRouter()
  const route = useRoute()
  const { layoutInfo } = useSysInfoStore()

  function go(path: string) {
    console.log(path)
    if (!path) {
      return
    }
    router.push(path)
  }

  /*------------------------------------------ tab ------------------------------------------*/
  const selectedTab = ref(route.path)
  const onSwitchTab = (key: string) => {
    selectedTab.value = key
    router.push(key)
  }

  /* 页面滚动逻辑  ------------------------------------------------------------------------------------*/
  //#region
  const pageHeaderRef = ref<null | HTMLElement>(null)
  const pageFooterRef = ref<null | HTMLElement>(null)
  const pageHeaderHeight = ref(0)
  const pageFooterHeight = ref(0)
  const paddingTop = 24

  const isScrollStart = ref(false)
  const modalBodyScroll = () => {
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
    isScrollStart.value = (scrollTop || 0) > 0

    if (scrollTop + document.body.clientHeight >= document.body.scrollHeight) {
      emits('scrollBottom')
    }
  }

  // 监听页面滚动
  useEventListener(window, 'scroll', modalBodyScroll)

  // 监听底部高度变化
  useResizeObserver(pageFooterRef, entries => {
    const entry = entries[0]
    const { height } = entry.contentRect
    pageFooterHeight.value = height
  })

  // 计算固定body的body高度
  const { height: windowHeight } = useWindowSize()
  const fixedBodyHeight = computed(() => {
    const height = windowHeight.value > 800 ? windowHeight.value : 800

    console.log(
      height,
      layoutInfo.headerHeight,
      pageHeaderHeight.value,
      pageFooterHeight.value,
      height - layoutInfo.headerHeight - pageHeaderHeight.value - pageFooterHeight.value
    )

    return height - layoutInfo.headerHeight - pageHeaderHeight.value - pageFooterHeight.value - paddingTop
  })

  onMounted(() => {
    pageHeaderHeight.value = pageHeaderRef.value?.offsetHeight || 0
    pageFooterHeight.value = pageFooterRef.value?.offsetHeight || 0
  })
</script>

<style lang="less" scoped>
  @import '@/styles/mixins.less';

  .main-card {
    position: relative;
    overflow: hidden;
    // padding: 12px 0;
    padding: 0 32px 20px;
    width: 100%;
    background-color: inherit;

    .page-header {
      &.bottom-border {
        border-bottom: 1px solid @border2;
        margin-bottom: -1px;
      }

      .header-title {
        padding: 20px 0;

        .title-icon {
          margin-right: 10px;

          .icon {
            font-size: 24px;
          }
        }

        .title-box {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .title {
            display: flex;
            align-items: center;
            gap: 0 12px;

            .icon {
              transform: translateY(2px);
            }
          }

          .switch-tabs {
            :deep(.tabs) {
              .tab {
                font-size: 14px;
                color: rgba(25, 25, 48, 0.75);
                font-weight: 700;
              }

              .tab--active {
                color: rgba(17, 22, 31, 0.75);
                background-color: rgba(0, 0, 0, 0.1);
              }
            }
          }
        }

        .subheading-text {
          margin-top: 8px;
          max-width: 300px;
          .font14();
        }

        :deep(.crumbs) {
          padding: 0 0 16px;

          li {
            display: flex;

            .ant-breadcrumb-link {
              color: @text04;
              .font14();

              span {
                display: block;
                max-width: 720px;
                .elliptical-1();
              }
            }

            &:last-child {
              .ant-breadcrumb-link {
                color: @text03;
                .font14();
              }
            }
          }

          &.exceed {
            a,
            .ant-breadcrumb-link span {
              display: block;
              max-width: 150px;
              .elliptical-1();
            }
          }
        }

        .default-title {
          // .fc();
          // margin-right: 24px;
          min-height: 36px;
          .font20b();
          .flc();
        }
      }

      .screen-space {
        padding: 12px 0;
      }
    }

    .main-body {
      position: relative;
      overflow-y: auto;
      // padding: 0 32px;
    }

    .page-footer {
      position: fixed;
      bottom: 0;
      left: @side-menu-width;
      width: 100%;
    }
  }

  :deep(.ant-breadcrumb-separator) {
    display: inline-block;
    width: 16px;
    text-align: center;
    margin-inline: 0;
  }
</style>
